<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo_list</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="dist/css/sm.css">
    <link rel="stylesheet" href="dist/css/sm-extend.css">
    <link rel="stylesheet" href="css/demo_user.css">
</head>
<body>
<style>
    .menu-fixed {
        position: fixed;
        right: 10px;
        bottom: 120px;
        background-image: url(images/detail/change.png);
        width:46px; height:46px; background-position:-10px -215px;
    }
    .menu-fixed.active {
        width:46px; height:195px; background-position:-10px -10px;
    }
    .menu-fixed-list {
        width:46px;        height: 100%;
        display: none;
    }
    .menu-fixed-list a {

        display: block;
        font-size: 0;
        margin-bottom: 5px;
    }
    .menu-fixed-list>li a {
        height: 46px;
    }
    .menu-fixed-mini {
        margin-bottom: 10px;
        width:46px;        height: 46px;
    }
    .menu-fixed-mini a {
        width:46px;        height: 46px;
        display: block;
        font-size: 0;
    }
</style>
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page">
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="menu-fixed">
                <ul class="menu-fixed-list">
                    <li class="fore01"><a href="http://www.emeixian.com/mobile/" class="external">首页</a></li>
                    <li class="fore02"><a href="http://www.emeixian.com/mobile/search.php?" class="external">搜索</a></li>
                    <li class="fore03"><a href="http://www.emeixian.com/mobile/user.php?act=user_center" class="external">我的美鲜</a></li>
                    <li class="fore04"><a href="javascript:void(0)" class="external">收起</a></li>
                </ul>
                <div class="menu-fixed-mini"><a href="javascript:void(0)" class="external"></a></div>
            </div>
        </div>
    </div>

    <!-- 其他的单个page内联页（如果有） -->
</div>
<script type="text/javascript" src="assets/js/zepto.js"></script>
<script src="dist/js/sm.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/sm-extend.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/sm-city-picker.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/config.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="assets/js/common.js" type="text/javascript" charset="utf-8"></script>-->
<script src="assets/js/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function(){

//        打开面板
        $('.menu-fixed .menu-fixed-mini a').click(function(){
            var thisState = $(this).closest('.menu-fixed');
            if(thisState.hasClass('active')==false){
                thisState.addClass('active');
                $('.menu-fixed-mini').hide();
                $('.menu-fixed-list').show();
            }

        });
//        收起面板
        $('.fore04 a').click(function(){
            $('.menu-fixed-mini').show();
            $('.menu-fixed-list').hide();
            $('.menu-fixed').removeClass('active');
        })
    })
</script>
</body>
</html>